<template>
    <a-card title="门禁授权" :bordered="false">
        <!-- Card Header -->


        <template slot="extra">
            <a-form layout="inline" @submit.prevent="searchSubmit">
                <a-form-item>
                    <a-input v-model="searchForm.code" placeholder="场地代码"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-input v-model="searchForm.name" placeholder="场地名称"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-input v-model="searchForm.remark" placeholder="备注"></a-input>
                </a-form-item>

                <a-form-item>
                    <a-select show-search placeholder="状态" allowClear showSearch v-model="searchForm.status"
                              option-filter-prop="children"
                              style="width: 150px">
                        <a-select-option v-for="(item, index) in PassWayTaskStatusOPT" :key="index" :value="item.value">
                            {{
                            item.label }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item>
                    <a-button icon="search" type="primary" html-type="submit">搜索</a-button>
                </a-form-item>
                <a-form-item>
                    <a-button icon="plus" type="danger" @click="openEdit()">新建</a-button>
                </a-form-item>
            </a-form>
        </template>
        <a-table bordered
                 :columns="columns"
                 :rowKey="record => record.id"
                 :dataSource="dataSource"
                 :pagination="pagination"
                 :loading="loading"
                 @change="handleTableChange"
        >
            <!-- 状态插槽 -->
            <template slot="description" slot-scope="text, record">
                <div v-html="formtDescription(text,record)"></div>
            </template>


            <template slot="status" slot-scope="text, record">
                {{ $exMod.findDict(PassWayTaskStatusOPT,text) }}
            </template>


            <!-- 操作插槽 -->
            <template slot="operation" slot-scope="text, record">

                <a @click="()=>{ LogModalShow=true; LogModalObj=record }">日志</a>
                <a-divider type="vertical"/>

                <a-dropdown>
                    <a class="ant-dropdown-link"> 执行
                        <a-icon type="down"/>
                    </a>
                    <a-menu slot="overlay">
                        <a-menu-item>
                            <a href="javascript:void(0);"
                               @click="nowRunTask(record,'down')"> 门禁授权 </a>
                        </a-menu-item>
                        <a-menu-item>
                            <a href="javascript:void(0);"
                               @click="nowRunTask(record,'clearn')">取消授权
                            </a>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>


                <a-divider type="vertical"/>


                <a-dropdown>
                    <a class="ant-dropdown-link"> 管理
                        <a-icon type="down"/>
                    </a>
                    <a-menu slot="overlay">

                        <a-menu-item>
                            <a @click="openStaffEdit(record)">人员</a>
                        </a-menu-item>

                        <a-menu-item>
                            <a @click="openEdit(record)">编辑</a>
                        </a-menu-item>


                        <a-menu-item>

                            <a href="javascript:void(0) ;" @click="delAuthorize(record)">删除</a>

                        </a-menu-item>
                    </a-menu>
                </a-dropdown>


            </template>

        </a-table>

        <!--  编辑弹窗-->
        <EditBox v-if="editShow" @closeFun="closeEdit" :editRecord="editRecord"/>
        <!--        授权弹窗-->
        <StaffModal v-if="StaffModalShow" :taskObj="StaffModalObj"
                    @closeModal="(e)=>{ StaffModalShow=false; StaffModalObj={}; }"/>
        <!--            日志弹窗-->
        <NoticeModal v-if="LogModalShow" :logObj="LogModalObj"
                     @closeModal="(e)=>{ LogModalShow=false; LogModalObj={}; }"
        />


    </a-card>
</template>
<script>


    import {dictLoad} from '../../../util/internal.api';
    import {pagination, authorizeTable} from '../public/colums';
    import {authorizeList, authorizeRun, authorizeDel,} from '../public/http';

    export default {
        components: {
            EditBox: () => import('./edit'),
            StaffModal: () => import('./StaffModal'),
            NoticeModal: () => import('./NoticeModal'),
        },
        data() {
            return {
                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录

                StaffModalShow: false, //人员编辑器窗台
                StaffModalObj: {}, //人员编辑器对应的记录

                LogModalShow: false,  //任务日志窗口界面
                LogModalObj: {},      //任务日志对象


                dataSource: [],
                pagination: {
                    ...pagination
                }, //复制预设的分页参数
                loading: false, //表格loading
                columns: authorizeTable, //表头管理
                searchForm: {
                    code: '',
                    name: '',
                    remark: '',
                    status: ''
                },
                PassWayTaskStatusOPT: []
            };
        },
        methods: {
            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                authorizeList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },

            //格式化任务描述
            formtDescription(text, record) {
                return `在 <span class="bule">${record.beginDate}</span>  至 <span class="bule"> ${record.endDate}</span> 周期内，每天的
					<span class="bule">${record.beginTime}</span> - <span class="bule"> ${record.endTime} </span>,
					允许指定人员在 <span class="bule">${record.wayName}</span>  通行 。`;
            },


            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },
            //2.0打开编辑器
            openEdit(obj = {}) {
                this.editRecord = obj;
                this.editShow = true;
            },


            //2.1 关闭编辑器
            closeEdit(e) {
                this.editShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },
            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },


            //5.0 人员编辑器
            openStaffEdit(obj) {

                this.StaffModalObj = obj;
                this.StaffModalShow = true;
            },


            //立即执行计划任务


            nowRunTask(record, type) {
                var _this = this;
                let message = null;
                let content = null;
                if (type === 'down') {
                    message = `确定立即执行 ${record.title} 的授权操作吗？`
                    content = `该操作会立即对任务内的人员 开启 ${record.wayName} 的通行权限`
                } else {
                    message = `确定立即执行  ${record.title}  的取消授权操作吗？`
                    content = `该操作会立即对任务内人员 关闭 ${record.wayName} 的通行权限`
                }

                this.$confirm({
                    title: message,
                    content: content,
                    width: 500,
                    onOk() {
                        let obj = {type: type}
                        authorizeRun(record.id, obj).then(res => {
                            _this.ajaxMessage(res);

                        })


                    },
                });


            },

            //删除计划任务
            delAuthorize(record) {
                var _this = this;

                this.$confirm({
                    width: 450,
                    title: '确定要删除授权计划吗',
                    content: `删除授权计划会同时删除当前计划内的人员的通行权限`,
                    onOk() {

                        authorizeDel(record.id).then(res => {
                            if (res.code === 0) {
                                _this.getTableList();
                            }
                            _this.ajaxMessage(res);


                        });

                    },


                })
                ;

            },


            ajaxMessage(res) {
                if (res.code === 0) {
                    //成功提醒
                    this.$notification.success({
                        message: '操作成功',
                        description: res.message
                    });

                } else {
                    //错误提醒
                    this.$notification.warning(res.message);
                }


            },


            //数据初始化
            async init() {
                await dictLoad('PassWayTaskStatus').then(res => (this.PassWayTaskStatusOPT = res));
                this.getTableList();
            }

        },
        created() {
            this.init();
        }
    };
</script>
<style>

    .bule {
        color: blue
    }
</style>